<template>
	<view>
		<uni-section class="mb-10" title="亲友权限管理" sub-title="" type="line"> </uni-section>
		<uni-list>
			<view v-for="(item,index) in relationList" :key="index">
				<uni-list :border="true">
					<!-- 自定义右侧内容 -->
					<uni-list-chat :title="item.remark" :avatar-circle="true"
						:avatar="apiUrl + item.pic" :note="item.relation">
						<view class="chat-custom-right">
							<switch :checked="item.status ===1 ? true : false" @change="switchChange(item.id, item.status)" color="#00d500" style="transform:scale(0.8)" />
						</view>
					</uni-list-chat>
				</uni-list>
			</view>
			
		</uni-list>
		<!-- <button class="btn" @click="addRelation">添加关系</button> -->

		<uni-popup ref="popup1" type="bottom" border-radius="20px 20px 0 0" class="key_main" backgroundColor="#fff">
			
			<view class="content">
				<form>
					<!-- 表单内容 -->
					<view class="form-item">
						<text class="label">联系人</text>
						<input class="input" placeholder="请填写联系人账号" value="" v-model="account" />
					</view>
					<view class="form-item">
						<text class="label">关系</text>
						<input class="input" placeholder="请填写该联系人与患者的关系" value="" v-model="relation" />
					</view>
				</form>
			</view>
			<view>
				<button style="background-color: #27ba9b;" @click="saveRelation()">
					确定添加
				</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		apiUrl
	} from '@/config/config.js';
	export default {
		data() {
			return {
				apiUrl: apiUrl,
				account: '',
				relation: '',
				relationList: '',
				
			}
		},
		
		onShow(options) {
			this.onRefreshPage()
		},
		methods: {
			switchChange(id, status) {
				uni.request({
					url: this.apiUrl + '/api/relation/change',
					data: {
						id: id,
						status: status
					},
					header: {
						account: uni.getStorageSync('account_key')
					},
					method: 'GET',
					success: (res) => {
						this.onRefreshPage()
					}
				})
			},
			addRelation() {
				this.$refs.popup1.open('bottom')
			},
			saveRelation() {
				console.log("添加关系")
				uni.request({
					url: this.apiUrl + '/api/relation/save',
					data: {
						relationId: this.account,
						relation: this.relation
					},
					header: {
						account: uni.getStorageSync('account_key')
					},
					method: 'POST',
				})
			},
			onRefreshPage(){
				uni.request({
					url: this.apiUrl + '/api/relation/list2',
					
					header: {
						account: uni.getStorageSync('account_key')
					},
					method: 'GET',
					success: (res) => {
						if (res.data.code == '200') {
							this.relationList = res.data.data
						} else {
					
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.chat-custom-right {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
	}

	.btn {
		height: 80rpx;
		margin: 30rpx 20rpx;
		color: #fff;
		border-radius: 80rpx;
		font-size: 30rpx;
		background-color: #27ba9b;
	}

	.content {
		margin: 20rpx 20rpx 0;
		padding: 0 20rpx;
		border-radius: 10rpx;
		background-color: #fff;

		.form-item,
		.uni-forms-item {
			display: flex;
			align-items: center;
			min-height: 96rpx;
			padding: 25rpx 10rpx;
			background-color: #fff;
			font-size: 28rpx;
			border-bottom: 1rpx solid #ddd;
			position: relative;
			margin-bottom: 0;

			// 调整 uni-forms 样式
			.uni-forms-item__content {
				display: flex;
			}

			.uni-forms-item__error {
				margin-left: 200rpx;
			}

			&:last-child {
				border: none;
			}

			.label {
				width: 200rpx;
				color: #333;
			}

			.input {
				flex: 1;
				display: block;
				height: 46rpx;
			}

			.switch {
				position: absolute;
				right: -20rpx;
				transform: scale(0.8);
			}

			.picker {
				flex: 1;
			}

			.placeholder {
				color: #808080;
			}
		}
	}
</style>